<template>
  <div class="login_container">
    <div class="login_box">
      <el-form ref="loginFromRef" :model="loginFrom" label-width="0px" class="login_from">
        <el-form-item>
          <el-input v-model="loginFrom.username"></el-input>
        </el-form-item>
        <el-form-item>
          <el-input v-model="loginFrom.password" type="password"></el-input>
        </el-form-item>
        <el-form-item class="btns">
          <el-button type="primary" @click="Login">登录</el-button>
          <el-button type="info" @click="resetLoginFrom">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>


<script>
  export default {
    name: 'login',
    data () {
      return {
        loginFrom: {
          username: "admin",
          password: "123456"
        }
      }
    },
    methods: {
      resetLoginFrom () {
        //console.log(this);
        this.$refs.loginFromRef.resetFields()
      },
      async Login() {
        const { data: res } = await this.$http.post('login', this.loginFrom)
        //console.log(res);
        if (res.meta.status !== 200) return console.log('登录失败');
        console.log('登录成功');
        window.sessionStorage.setItem('token', res.data.token)
        this.$router.push('/home')
      }
    }
  }
</script>

<style scoped lang="less">
  .login_container {
    
    height: 100%;
  }
  .login_box {
    width: 450px;
    height: 300px;
    background-color: aqua;
    border-radius: 3px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50% , -50%);
  }
  .btns {
    display: flex;
    justify-content: flex-end;
  }
  .login_from {
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
  }
</style>